import React, {
  Component
} from 'react'
import {
  StyleSheet,
  View,
  ListView,
  Image,
  Text,
  TouchableOpacity
} from 'react-native'
import {Icon} from '../../components/common/icon'
import Username from './Username'
import PhoneNumber from './PhoneNumber'
import NavigationBar from '../../components/common/NavigationBar'

class PersonalInfo extends Component {
  constructor(props) {
    super(props)
    // 初始状态
    this.state = {}
  }
  render() {
    return (
      <View style = {styles.container}>
        <NavigationBar
          title={'个人信息'}
          statusBar={{backgroundColor: '#ffffff', barStyle: 'dark-content'}}
          navigator={this.props.navigator}
          style={{borderBottomWidth: 1, borderColor: '#EDEDED', backgroundColor: '#ffffff'}}
        />
        <TouchableOpacity onPress = {this._onEditAvator.bind(this)} >
          <View style={[styles.item, styles.avator]}>
            <Text style={styles.title}>头像</Text>
            <View style={styles.avatorContent}>
              <Image source = {require('../../img/camera.png')} style = {styles.avatorImg} />
              <Icon name="icon_jiantou" size={16} color="#999999" />
            </View>
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress = {this._onEditPersonInfo.bind(this, Username)} >
          <View style={[styles.item, styles.username]}>
            <Text style={styles.title}>昵称</Text>
            <Text style={styles.itemContent}>周杰伦</Text>
            <Icon name="icon_jiantou" size={16} color="#999999" style = {styles.icon} />
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress = {this._onEditPersonInfo.bind(this, PhoneNumber)} >
          <View style={styles.item}>
            <Text style={styles.title}>已绑手机号</Text>
            <Text style={styles.itemContent}>18257101874</Text>
            <Icon name="icon_jiantou" size={16} color="#999999" style = {styles.icon} />
          </View>
        </TouchableOpacity>
      </View>
    )
  }
  _onEditAvator() {

  }
  _onEditPersonInfo(component) {
    this.props.navigator.push({
      component: component,
      params: {
        navigator: this.props.navigator
      }
    })
  }
}

export default PersonalInfo

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F4F4F4',
    flex: 1,
  },
  item: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 70,
    paddingLeft: 20,
    paddingRight: 20,
    backgroundColor: '#ffffff',
  },
  avator: {
    justifyContent: 'space-between',
    marginTop: 10,
    marginBottom: 10,
    borderTopColor: '#EDEDED',
    borderTopWidth: 1,
    borderBottomColor: '#EDEDED',
    borderBottomWidth: 1,
  },
  avatorContent: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatorImg: {
    width: 54,
    height: 54,
    borderRadius: 27,
    marginLeft: 28,
    marginRight: 20,
  },
  username: {
    borderTopColor: '#EDEDED',
    borderTopWidth: 1,
  },
  title: {
    width: 100,
    color: '#666666',
    fontSize: 14,
  },
  itemContent: {
    flex: 1
  },
})
